<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/_fragment::head(~{::title})">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 兼容移动端和PC端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{../css/semantic-UI/semantic.min.css}">
    <link rel="stylesheet" th:href="@{../lib/editormd/css/editormd.min.css}">
    <link rel="stylesheet" th:href="@{../css/me.css}">
    <title>博客分类添加页面</title>
</head>
<body>
<!-- 导航 -->
<!-- inverted 反转   attached 没有圆角 -->
<nav th:replace="admin/_fragment::menu(2)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <div class="ui container">
        <!-- stackable屏幕下的时候可堆叠的 适应手机端 -->
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">博客管理</h2>
            <!-- 标签加了mini之后   火狐正常显示 edge错位显示  所以加上small -->
            <a href="#" class="active item m-item m-mobile-hide"><i class="small home icon"></i>首页</a>
            <a href="#" class="item m-item m-mobile-hide"><i class="small idea icon"></i>分类</a>
            <a href="#" class="item m-item m-mobile-hide"><i class="small tags icon"></i>标签</a>

            <div class="right menu">
                <div class="ui dropdown m-item m-mobile-hide item">
                    <div class="text">
                        <img src="https://picsum.photos/id/103/100/100" alt="" class="ui avatar image">
                        陈楷
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item">注销</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<div class="ui attached pointing menu">
    <div class="ui container">
        <div class="right menu">
            <a href="#" th:href="@{/admin/input}" class="item active teal">发布</a>
            <a href="#" th:href="@{/admin/types}" class="item">列表</a>
        </div>
    </div>
</div>


<!-- 中间容器 -->
<div class="m-padded-tb-big m-container-small">
    <div class="ui container">

        <form action="#"  th:action="@{/admin/addTypes}" method="post" class="ui form" >
            <input type="hidden" th:value="*{type.id}" name="id">
            <div class="required field">
                <div class="ui left labeled input">
                    <label class="ui teal basic label">名称</label>
                    <input type="text" name="name" id="name" placeholder="分类名称" >
                </div>
            </div>


            <div class="ui error message"></div>

            <div class="ui right aligned container">
                <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
                <button class="ui teal submit button" id="btn">提交</button>
            </div>

        </form>

    </div>
</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>



<!-- 底部footer -->
<footer th:replace="admin/_fragment::footer" class="ui  inverted vertical segment m-footer-padding-tb-massive">
    <div class="ui center aligned container   ">
        <div class="ui inverted divided stackable grid">
            <!--二维码-->
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img th:src="@{../image/WeChat.jpg}" class="ui rounded image"
                             style="width: 110px" alt=""/>
                    </div>
                </div>
            </div>
            <!--文字-->
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced m-opacity-mini">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">江西龙头的故事</a>
                    <a href="#" class="item">陈楷的风光一生</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Emall:1240863484@qq.com</a>
                    <a href="#" class="item">QQ:1240863484</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">博客简介</h4>
                <p class="m-text-thin m-text-spaced  m-opacity-mini">
                    这是我的个人博客、会分享关于编程、写作、思考相关的任何内容、希望可以给来到这儿的人有所帮助...
                </p>
            </div>
        </div>
        <div class="ui inverted section divider">
            <br>
            <br>
            <p class="m-text-thin m-text-spaced m-opacity-tiny">
                Copyright © 2022 - 06 - 01 Lirenmi Designed by Lirenmi
            </p>
        </div>
    </div>
</footer>

<script th:src="@{../js/Jquery.js}"></script>
<script th:src="@{../css/semantic-UI/semantic.min.js}"></script>
<script th:src="@{../lib/editormd/editormd.min.js}"></script>

<script>


    $('.menu.toggle').click(function(){
        //点击这个按钮去除css中的m-mobile-hide样式
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    // 表单验证
    $(".ui.form").form({
        fields : {
            name : {
                identifier: 'name',
                rules: [{
                    type : 'empty',
                    prompt : '请输入分类名称'
                }]
            },
        }
    })

    $(function () {
        $("#name").blur(function () {
            $.ajax({
                url:"/admin/name",
                type: "get",
                data: {"name":$("#name").val()},
                dataType:"json",
                success:function (data) {
                    if(data.toString()=="true"){
                        // alert("分类不存在")
                        $("#btn").attr("disabled",false);
                    }else {
                        alert("分类已经存在，请重新输入后在提交")
                        //设置按钮不可提交
                        $("#btn").attr("disabled",true);
                    }
                }
            });
        });

        //
        // $("#btn").on("click", function () {
        //    $("#name").blur();
        //        if ($("#name").attr("status") == true) {
        //            $("#btn").submit();
        //        }
        // });

    });



</script>
</body>
</html>